<template>
  <el-dialog v-model="dialogVisible" title="Tips" width="55%" :before-close="handleClose">
    <template #header>
      <title-view :title="title" />
    </template>
    <el-button type="primary" @click="handleUpload">
      <el-icon class="el-icon--right">
        <img style="width: 16px; margin-right: 8px" src="../../../../../assets/images/image/up.png" alt="" />
      </el-icon>
      上传附件
    </el-button>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      :header-cell-style="{ background: '#F2F6FC', color: '#4E5969', 'font-weight': 400, 'font-size': '14px' }"
    >
      <el-table-column prop="createTime" label="上传日期" />
      <el-table-column prop="name" label="文件名称" show-overflow-tooltip>
        <template #default="{ row }">
          <div style="display: flex; align-items: center">
            <el-image
              preview-teleported
              hide-on-click-modal
              style="width: 50px; height: 50px; margin-right: 20px; flex-shrink: 0"
              :src="row.fileUrl"
              :preview-src-list="[row.fileUrl]"
            >
              <template #error>
                <div class="image-slot">
                  <img
                    style="width: 50px; height: 50px; margin-right: 20px"
                    src="../../../../../assets/images/image/pdf.png"
                    alt=""
                  />
                </div>
              </template>
            </el-image>
            <div>{{ row.fileName }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="姓名" width="150" />
      <el-table-column prop="address" label="操作" width="100" align="center">
        <template #default="{ row }">
          <img
            @click="handleDown(row)"
            style="width: 16px; margin-right: 10px; cursor: pointer"
            src="@/assets/images/image/down.png"
            alt=""
          />
          <img @click="handleDel(row)" style="width: 16px; cursor: pointer" src="@/assets/images/image/del1.png" alt="" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <!--  上传弹窗 -->
  <el-dialog v-model="visible" title="上传附件" width="40%" :before-close="handleCloseUpload">
    <contract-upload
      :fileList="imageList"
      :accept="'.rar,.zip,.doc,.docx,.xlsx,.pdf,.jpg,.png'"
      multiple
      :max-size="100"
      :max-length="10"
      @upload-success="uploadImageList"
      @upload-remove="uploadImageListRemove"
      tips="支持上传rar/zip/doc/docx/xlsx/pdf/jpg/png，单个文件不超过100M"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCloseUpload" color="#F2F3F5">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { deleteFile, fileList, uploadFile } from "@/apis/contracting";
import { aDownFile, downloadPDF } from "@/utils/downFile";

const imageList = ref([]);
const tableData = ref([]);
const contracteesId = ref("");
const title = ref("附件管理");
const visible = ref(false);
const dialogVisible = ref(false);
// 点击上传
const handleUpload = () => {
  imageList.value = [];
  visible.value = true;
};
// 上传确认
const handleConfirm = async () => {
  if (imageList.value.length > 0) {
    await uploadFile({
      contracteesId: contracteesId.value,
      fileList: imageList.value
    });
    visible.value = false;
    ElMessage.success("上传成功");
    await getFileList();
  } else {
    ElMessage.error("没有附件，请上传附件");
  }
};
// 上传后的文件
const uploadImageList = data => {
  imageList.value.push({
    ...data
  });
};
// 删除上传
const uploadImageListRemove = index => {
  imageList.value.splice(index, 1);
};
// 关闭
const handleCloseUpload = () => {
  visible.value = false;
};
// 打开
const openModal = async id => {
  contracteesId.value = id;
  await getFileList();
  dialogVisible.value = true;
};
// 获取附件列表
const getFileList = async () => {
  const { data } = await fileList(contracteesId.value);
  tableData.value = data;
};
// 关闭
const handleClose = () => {
  dialogVisible.value = false;
};
// 下载
const handleDown = row => {
  window.open(row.fileUrl);
};
const handleDel = async row => {
  ElMessageBox.confirm("确认删除选中附件?", "删除附件", {
    type: "warning",
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        instance.confirmButtonLoading = true;
        await deleteFile(row.contracteesFileId);
        ElMessage.success("删除成功");
        await getFileList();
        instance.confirmButtonLoading = false;
        done();
      } else {
        done();
      }
    }
  });
};
defineExpose({ openModal });
</script>

<style scoped lang="scss">
.title-container {
  font-size: 14px !important;
}

.dialog-footer {
  text-align: center;

  .el-button {
    height: 36px;
    width: 120px;
  }
}

.del-title {
  margin-bottom: 10px;

  span {
    color: #f53f3f;
    margin-right: 5px;
  }
}

:deep(.el-textarea__inner) {
  background: #f2f3f5 !important;
  box-shadow: none !important;
}

:deep(.el-input__count) {
  background: #f2f3f5 !important;
}
</style>
